<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .center{
            width: 1400px;
            margin: 0 auto;
        }
        body{
            background-color: rgb(241,242,243);
        }
        .el-header{
            background-color: white;
        }
        /* 修改菜单项的悬停样式 */
        .el-menu-item:hover {
            background-color: red;
            color: orange;
        }
        #footer_center p{
            margin: 0;
        }
        #footer_center h3{
            color: white;
        }
        .vodeolist img:hover {
            transform: scale(1.2);
        }
        .background{
            background-image: url('http://rvg6mjj7z.hn-bkt.clouddn.com/img/background.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <!--头,引入my-header.js-->
        <my-header></my-header>
        <!--中间,主要内容部分-->
        <div class="background" >
            <el-main class="center" style="margin-top: 30px">
                <el-row gutter="20">

                    <el-row style="background-color: white;margin-top: 20px">
                        <el-col span="3">
                            <p style="font-size: 28px;line-height: 70px;margin: 0">搜索结果</p>
                        </el-col>
                        <el-col span="21">


                            <el-menu mode="horizontal" @select="searchSelect" default-active="0" active-text-color="orange">
                                <el-menu-item index="0">全部</el-menu-item>
                                <el-menu-item v-for="c in categoryArr"
                                              :index="c.id">{{c.name}}
                                </el-menu-item>
                                <el-menu-item index="8">用户</el-menu-item>

                            </el-menu>

                        </el-col>


                    </el-row>
                    <!--                <template>
                                            <ul>
                                                <h1></h1>
                                                <li v-for="item in searchArr" style="display: inline-block; white-space: nowrap;">{{ item }}</li>
                                            </ul>
                                    </template>-->



                </el-row>



                <el-row gutter="20">

                    <el-col  span="24" style="text-align: center;">
                        <template v-if="v.searchArr.length == 0" >
                            <h1>    </h1>
                            <el-card style="background-color: transparent; border: none;height : 40px">
                                <h1>   </h1>
                            </el-card>
                            <el-card>
                                <h1 >暂时没有更多了哦</h1>
                            </el-card>
                            <el-card style="background-color: transparent; border: none;height : 310px">
                                <h1>   </h1>
                            </el-card>

                        </template>
                    </el-col>

                    <el-col v-for="r in searchArr" span="6" >


                        <!-- <h1>r.categoryId = {{r.userId}}</h1>-->
                        <!-- <h1>r.categoryId = {{r.categoryId}}</h1>-->

                        <template v-if="r.userId != null">
                            <el-card style="margin: 10px 0; height : 291px"  >
                                <a style="color: #333;text-decoration: none"
                                   :href="'/personalHomepage.html?userId='+r.userId">
                                    <img :src="r.imgUrl" width="100%" height="175">
                                </a>
                                <p class="title_p">     </p>
                                <el-row gutter="20">
                                    <el-col span="4">
                                        <!--圆形图片,专门用来显示头像-->
                                        <el-avatar size="small" :src="r.imgUrl"></el-avatar>
                                    </el-col>
                                    <el-col span="10">{{r.nickname}}</el-col>
                                </el-row>
                            </el-card>
                        </template>

                        <template v-else-if="r.paid == 0">
                            <el-card style="margin: 10px 0; height : 291px">
                                <a class="vodeolist" style="color: #333;text-decoration: none; position: relative; display: inline-block;" :href="'/video.html?bvid='+r.bvid">
                                    <img :src="r.imgeurl" width="100%" height="144" style="cursor: pointer;">
                                    <div class="play-button"></div>
                                    <p style="height: 40px; cursor: pointer;overflow: hidden;
                                      display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical">{{r.coursename}}</p>
                                </a>
                            </el-card>
                        </template>

                        <template v-else-if="r.paid == 1">
                            <el-card style="margin: 10px 0; height : 291px">
                                <a class="vodeolist" style="color: #333;text-decoration: none; position: relative; display: inline-block;" :href="'/course.html?bvid='+r.bvid">
                                    <img :src="r.imgeurl" width="100%" height="144" style="cursor: pointer;">
                                    <div class="play-button"></div>
                                    <p style="height: 40px; cursor: pointer;overflow: hidden;
                                      display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical">{{r.coursename}}</p>
                                </a>
                                <div  style="display: inline-block;;color: red;font-size: 20px">
                                    ￥: {{r.price}}
                                </div>
                                <div style="color: #cccccc;display: inline-block;margin-left: 70px"><i class="el-icon-user-solid">{{r.boughtnum}}人已购</i></div>
                            </el-card>
                        </template>

                        <template v-else-if="r.type == 2">
                            <el-card style="margin: 10px 0; height : 291px" >
                                <div>
                                    <video style="width: 100%" :src="r.videourl"
                                           controls type="video/mp4">
                                    </video>
                                </div>
                                <p class="title_p">{{r.title}}</p>
                                <el-row gutter="20">
                                    <el-col span="4">
                                        <!--圆形图片,专门用来显示头像-->
                                        <el-avatar size="small" :src="r.imgeurl"></el-avatar>
                                    </el-col>
                                    <el-col span="10">{{r.nickname}}</el-col>
                                </el-row>
                            </el-card>

                        </template>

                        <template v-else>
                            <el-card style="margin: 10px 0; height : 291px" >
                                <a style="color: #333;text-decoration: none"
                                   :href="'/contentDetail.html?id='+r.id">
                                    <img :src="r.imgUrl" width="100%" height="144">
                                    <p class="title_p">{{r.title}}</p>
                                </a>
                                <el-row gutter="20">
                                    <el-col span="4">
                                        <!--圆形图片,专门用来显示头像-->
                                        <el-avatar size="small" :src="r.imgeurl"></el-avatar>
                                    </el-col>
                                    <el-col span="10">{{r.nickname}}</el-col>
                                </el-row>
                            </el-card>
                        </template>



                    </el-col>
                </el-row>




            </el-main>
        </div>

        <!--脚-->
        <el-footer style="height: 350px;background-color: darkgrey;padding:50px 0" v-show="isShowFooter">
            <my-footer></my-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!--import axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-header.js"></script>
<script src="js/my-footer.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function (){
            return {
                isShowFooter: 1,
                searchArr:[],
                categoryArr: []
            }
        },

        methods: {
            searchSelect(key, keyPath) {
                this.loadContent(key,this.kd = localStorage.getItem('searchkd'));
            },
            setShowFooter(number){
                this.isShowFooter = number;
            },
            loadContent(categoryId,kd) {
                //发请求获取某个类型下某个分类的数据
                console.log(categoryId,kd)
                axios.get("/v1/contents/" + categoryId + "/" + kd +"/search")
                    .then(function (response) {
                        if (response.data.code == 1) {
                            v.searchArr = response.data.data;
                            if(v.searchArr.length == 0){
                                v.isShowFooter = 0;
                            }else {
                                v.isShowFooter = 1;
                            }
                        }

                    })
            }

        },

        created: function () {
            this.kd = localStorage.getItem('searchkd');

            axios.get("/v1/categories/category").then(function (response) {
                if (response.data.code == 1) {
                    v.categoryArr = response.data.data;

                }
            })
            this.loadContent(0,this.kd);

        },
    })
</script>
</html>